<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Swiper的切换</title>
  <link rel="stylesheet" href="/player-image-res/css/swiper.min.css">
  <link rel="stylesheet" href="/player-image-res/css/certify.css">
  <script src="/player-image-res/js/swiper.min.js"></script>

</head>

<body>
  <div id="certify">
    <div class="swiper-container">
      <div class="swiper-wrapper">

        <div class="swiper-slide"><img src="/image/1.jpeg" />

        </div>
        <div class="swiper-slide"><img src="/image/2.jpeg" />

        </div>
        <div class="swiper-slide"><img src="/image/1.jpeg" />

        </div>
        <div class="swiper-slide"><img src="/image/2.jpeg" />

        </div>
        <div class="swiper-slide"><img src="/image/1.jpeg" />

        </div>
        <div class="swiper-slide"><img src="/image/2.jpeg" />

        </div>
        <div class="swiper-slide"><img src="/image/1.jpeg" />

        </div>
        <div class="swiper-slide"><img src="/image/2.jpeg" />

        </div>
      </div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>

  <script>
    var certifySwiper = new Swiper('#certify .swiper-container', {
      effect: 'cube', // 'slide', 'fade', 'cube', 'coverflow', 'flip', 'creative' or 'cards'
      pagination:false,
      speed: 1000,
      spaceBetween: 300,
      slidesPerView: 'auto',
      centeredSlides: true,
      loop: true,
      loopedSlides: 10,
      autoplay: {
        delay: 3000,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      pagination: {
        el: '.swiper-pagination',
        //clickable :true,
      },
      on: {

      }

    })
  </script>
</body>

</html>